<template>
  <div class="back" style=" height: calc(100vh - 100px)">


    <div style="height: 100px;"></div>

    <el-table v-loading="loading"
              :row-class-name="tableRowClassName"
              header-cell-class-name="header-name"
              :data="orderList">
      <el-table-column label="订单号" align="center" prop="orderId"/>
      <el-table-column label="商品" align="center" prop="ordersGoods">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="chakan(scope.row.ordersGoods,scope.row.ordersStatus)"
          >查看商品详情
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="收货信息" align="center" >
        <el-table-column label="姓名" align="center" prop="userName"/>
        <el-table-column label="手机" align="center" prop="userPhone"/>
        <el-table-column label="地址" align="center" prop="userAddr"/>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="ordersStatus"/>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.ordersStatus == '未发货'"
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
          >退单
          </el-button>
          <el-button
              v-if="scope.row.ordersStatus == '已发货'"
              size="mini"
              type="text"
              @click="handleDelete2(scope.row)"
          >联系商家
          </el-button>
          <el-button
              v-if="scope.row.ordersStatus == '已到货'"
              size="mini"
              type="text"
              @click="handleDelete2(scope.row)"
          >联系商家
          </el-button>

          <el-button
              v-if="scope.row.ordersStatus == '已到货'"
              size="mini"
              type="text"
              @click="handleUpdate(scope.row)"
          >已完成
          </el-button>

          <div  v-if="scope.row.ordersStatus == '已退单' || scope.row.ordersStatus == '已拦回' || scope.row.ordersStatus == '已完成'">无操作</div>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="订单商品详情" :visible.sync="open" width="70%" append-to-body>
      <el-table v-loading="loading"

                :row-class-name="tableRowClassName"
                header-cell-class-name="header-name"
                :data="cartList">
        <el-table-column label="名称" align="center" prop="goodsInfo.goodsName" show-overflow-tooltip/>
        <el-table-column label="类型" align="center" prop="goodsInfo.goodsType" />
        <el-table-column label="图片" align="center" prop="goodsInfo.goodsPic" width="180">
          <template slot-scope="scope">
            <div v-if="!scope.row.goodsInfo.goodsPic.split(',')[0]">暂无图像</div>
            <div v-else>
              <el-image
                  style="width: 50px; height: 50px"
                  :src="scope.row.goodsInfo.goodsPic.split(',')[0]"
                  :preview-src-list="scope.row.goodsInfo.goodsPic.split(',')">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="goodsInfo.goodsInfo" width="180" show-overflow-tooltip/>
        <el-table-column label="价格" align="center" prop="goodsInfo.goodsPrice"/>
        <el-table-column label="数量" align="center" prop="cartNum">
        </el-table-column>
        <el-table-column  label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">

            <el-button
                v-if="scope.row.ordersStatus == '已完成'"
                size="mini"
                type="text"
                @click="pingjia(scope.row)"
            >评价
            </el-button>

            <el-button
                v-if="scope.row.ordersStatus == '已拦回' || scope.row.ordersStatus == '已退单' || scope.row.ordersStatus === '已完成'"
                size="mini"
                type="text"
                @click="pingjia(scope.row)"
            >投诉
            </el-button>
            <div v-if="scope.row.ordersStatus !== '已完成' && scope.row.ordersStatus !== '已拦回' && scope.row.ordersStatus !== '已退单'">订单完成后方可评价或投诉</div>



          </template>
        </el-table-column>

      </el-table>
    </el-dialog>



  </div>



</template>

<script>

import {listOrders, getOrders, delOrders, addOrders, updateOrders} from "@/api/project/orders";
import {delCart} from "@/api/project/cart";

export default {
  name: "index",
  data() {
    return {
      orderList:[],
      loading:false,
      cartList:[],
      open:false
    }
  },

  created() {
    this.getList();
  },
  methods: {

    tableRowClassName({row, rowIndex}) {
      if (rowIndex %2 == 1) {
        console.log(111)
        return 'warning-row';
      } else  {
        console.log(222)
        return 'success-row';
      }

    },
    pingjia(e){

      this.$router.push({ path: '/goods/comments', query: { id: e.goodsInfo.id } });
    },
    handleDelete(row) {
      this.$confirm('是否确认退单？').then(function () {
        row.ordersStatus="已退单"
        return updateOrders(row);
      }).then(() => {
        this.getList();
        this.$message.success("退单成功");
      }).catch(() => {
      });
    },

    handleUpdate(row){
      this.$confirm('是否确认完成？').then(function () {
        row.ordersStatus="已完成"
        return updateOrders(row);
      }).then(() => {
        this.getList();
        this.$message.success("签收成功！");
      }).catch(() => {
      });
    },
    handleDelete2(row) {
      this.$confirm('是否确认拦回？').then(function () {
        row.ordersStatus="已拦回"
        return updateOrders(row);
      }).then(() => {
        this.getList();
        this.$message.success("拦回成功");
      }).catch(() => {
      });
    },

    chakan(e,f){
      let data= JSON.parse(e)
      data.forEach(res=>{
        res.ordersStatus=f
      })
      this.cartList=data
      console.log(data)
      this.open=true
    },
    getList() {
      this.loading = true;
      listOrders().then(response => {
        let data = response.data.filter(data => data.userId==JSON.parse(localStorage.getItem("userInfo")).id );

        this.orderList = data;
        this.total = data.length;
        this.loading = false;
      });
    },

  }
}
</script>

<style>
.back{
  background-image: url('../../assets/bg.png');
  background-size: cover;
}
.el-table .warning-row {
  background: #fcf2e6;
  font-size: 20px;
  color: black;
}
/*.el-table__body tr{

  pointer-events: none;

}*/
.el-table .success-row {
  background: #f8d6ba;
  font-size: 20px;
  color: black;
}


.header-name {
  font-size: 20px;
  color: black;
}
</style>
